<template>
  <div>
    <el-container>
      <!-- 顶部状态栏 -->
      <div class="orientation">
        <i class="el-icon-location-outline">中国大陆</i
        ><a href="" class="loginButton">亲,请登录</a>
        <a href="" style="color: red" class="topButton">免费注册</a
        ><a href="" class="topButton">我的订单</a>
        <el-dropdown class="topButton">
          <div class="el-dropdown-link" style="color: black">
            我的<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>我的关注</el-dropdown-item>
            <el-dropdown-item>我的足迹</el-dropdown-item>
            <el-dropdown-item>我的购物车</el-dropdown-item>
            <el-dropdown-item>我的优惠券</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 商城logo和搜索及购物车 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
        <!-- 搜索框 -->
        <div class="search">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            type="text"
            clearable
          >
            <el-button
              id="frame"
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
          <el-badge class="shopping_cart">
            <el-button
              type="mini"
              style="
                color: #e1251b;
                font-size: 15px;
                background: rgba(255, 0, 0, 0);
              "
              icon="el-icon-shopping-cart-full"
              class="btn"
              @click="goshoppingcart"
              >我的购物车</el-button
            >
          </el-badge>
        </div>
      </div>
      <!-- 广告链接 -->
      <img src="../../assets/guangao.png" alt="" />
      <!-- 面包屑 -->
      <el-header style="height: 30px">
        <a href="/" class="Navigationindentation" style="margin-left: 10%"
          >首页</a
        >
        <label class="Navigationindentation">></label>
        <a href="" class="">个人信息</a>
        <label class="Navigationindentation">></label>
        <a href="" class="">我的购物车</a>
        <label class="Navigationindentation">></label>
        <a href="" class="">收银台</a></el-header
      >
      <el-card class="contentbody">
        <el-card class="Message">
          <div class="ordernumber">
            <h1>订单剩余时间</h1>
            <p class="countdown">倒计时结束订单自动关闭</p>
            <label> {{ times }}秒 </label>
          </div>
          <div class="ordernumber">
            <h1>价格</h1>
            <b> ￥{{ price }} </b>
          </div>
        </el-card>
        <el-card class="Manner">
          <div class="WeChat">
            <img src="../../assets/imgs/1000.png" alt="" class="Img" />
            <el-radio v-model="radio" label="微信支付" class="redio"></el-radio>
          </div>
          <div class="Alipay">
            <img src="../../assets/imgs/1001.jpg" alt="" class="Img" />
            <el-radio
              v-model="radio"
              label="支付宝支付"
              class="redio"
            ></el-radio>
          </div>
          <div class="bankcard">
            <img src="../../assets/imgs/1002.webp" alt="" class="Img" />
            <el-radio
              v-model="radio"
              label="银行卡支付"
              class="redio"
            ></el-radio>
          </div>
          <div class="creditcard">
            <img src="../../assets/imgs/1003.webp" alt="" class="Img" />
            <el-radio
              v-model="radio"
              label="信用卡支付"
              class="redio"
            ></el-radio>
          </div>
          <br />
          <button class="return">返回购物车</button>
          <button class="payment" @click="paywindow">支付</button>
          <!-- 模态框 -->
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <div v-for="n in payimg" :key="n.id">
              <img :src="n.img" alt="" v-if="radio == n.name" class="payimg" />
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="queding">确 定</el-button>
            </span>
          </el-dialog>
        </el-card>
      </el-card>
    </el-container>
  </div>
</template>

<style scoped>
/* 顶部状态栏整体 */
.orientation {
  background-color: #e9eef3;
  width: 100%;
  padding-left: 10%;
}
/* 顶部我的下来菜单按钮 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
/* a链接去下划线并将字体颜色变黑 */
a {
  text-decoration: none;
  color: black;
}
/* 将鼠标放到a链接变色 */
a:hover {
  text-decoration: none;
  color: red;
}
/* 登录按钮 */
.loginButton {
  margin-left: 40%;
}
/* 顶部除登录外的三个按钮 */
.topButton {
  margin-left: 4%;
}

/* 搜索部分整体 */
.search {
  margin-left: 35%;
  margin-top: 2%;
}
/* 搜索按钮 */
.el-icon-search {
  height: 40px;
  width: 70px;
  background-color: red;
}
/* 鼠标移到搜索按钮变色 */
.el-icon-search:hover {
  background-color: rgb(219, 29, 29);
}
/* 购物车按钮 */
.shoppingcar {
  height: 40px;
  width: 130px;
  margin-left: 13%;
  color: red;
  border: none;
  background-color: white;
}
/* 将鼠标移到购物车按钮边框变色 */
.shoppingcar:hover {
  border-style: solid;
  color: red;
  border-width: 1px;
}
/* 购物车图标大小 */
.el-icon-shopping-cart-full {
  margin-right: 10px;
}
/* 面包屑整体大小 */
.el-header {
  background-color: #ebedf0d7;
}
/* 面包屑内容间隔 */
.Navigationindentation {
  margin-left: 1%;
  margin-right: 1%;
}
/* 内容主体结构 */
.contentbody {
  /* background-color: rgba(221, 211, 211, 0.801); */
  width: 80%;
  margin-left: 10%;
  height: 100%;
  padding-bottom: 30px;
}
/* 支付信息 */
.Message {
  width: 20%;
  height: 100%;
  float: left;
}
/* 倒计时 */
.countdown {
  font-size: 1px;
  transform: scale(0.7);
}
/* 支付方式 */
.Manner {
  width: 70%;
  height: 100%;
  padding-bottom: 30px;
  float: left;
  margin-left: 1%;
}
/* 价格 */
.ordernumber {
  text-align: center;
}
/* 微信 */
.WeChat {
  height: 50px;
  margin-top: 10px;
}
/* 支付宝 */
.Alipay {
  height: 50px;
  margin-top: 10px;
}
/* 银行卡 */
.bankcard {
  height: 50px;
  margin-top: 10px;
}
/* 信用卡 */
.creditcard {
  height: 50px;
  margin-top: 10px;
}
/* 单选按钮 */
.redio {
  float: right;
  margin-top: 30px;
}
/* 图片 */
.Img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: 10%;
  margin-right: 30%;
}
/* 支付 */
.payment {
  float: right;
  font-size: 20px;
  margin-right: 1%;
}
.payment:hover {
  position: relative;
  background-color: orange;
  border: black;
  border-width: 1px;
  border-style: solid;
}
/* 返回购物车 */
.return {
  float: right;
  font-size: 20px;
}
.return:hover {
  position: relative;
  background-color: red;
  border: black;
  border-width: 1px;
  border-style: solid;
}
/* 付款图片 */
.payimg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 头部 */
.top {
  height: 98px;
  margin-top: 15px;
}

/* Logo */
.logo {
  width: 190px;
  height: 80px;
  float: left;
  /* margin-top: 8px; */
  margin: 8px 0 0 160px;
}
/* 鼠标移到到logo变小手 */
.logo:hover {
  cursor: pointer;
}

/* 搜索框 */
.search {
  margin-left: 430px;
  line-height: 80px;
  margin-top: -1px;
  width: 600px;
}

/* 搜索按钮 */
#frame {
  background-color: #ff5000;
  font-size: 15px;
  border-radius: 1;
  color: #f5f5f5;
}

/* 购物车 */
.shopping_cart {
  margin-top: -160px;
  margin-left: 630px;
}
</style>

<script>
export default {
  data() {
    return {
      times: 250,
      radio: "",
      input: "",
      price: 0,
      dialogVisible: false,
      payimg: [
        { id: 1, img: require("../../assets/imgs/1000.png"), name: "微信支付" },
        {
          id: 2,
          img: require("../../assets/imgs/1001.jpg"),
          name: "支付宝支付",
        },
        {
          id: 3,
          img: require("../../assets/imgs/1002.webp"),
          name: "银行卡支付",
        },
        {
          id: 4,
          img: require("../../assets/imgs/1003.webp"),
          name: "信用卡支付",
        },
      ],
    };
  },
  watch: {
    radio() {
      console.log(this.radio);
    },
  },
  created() {
    this.getTime(); //只要该页面一渲染创建，就开始倒计时
  },
  methods: {
    queding() {
      this.dialogVisible = false;
      this.$message({
          message: '支付成功，祝您购物愉快',
          type: 'success'
        });
    },
    selectcountmoney() {
      this.price = this.$route.query.countmoney;
    },
    search() {
      this.$router.push("/search");
    },
    goshoppingcart() {
      this.$router.push("/shoppingcart");
    },
    getTime() {
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    paywindow() {
      if (this.radio != "") {
        this.dialogVisible = true;
      } else {
        this.$message.error("请选择支付方式");
      }
    },
  },
  mounted() {
    this.selectcountmoney();
  },
};
</script>